<template>
	<view>
		<!--选项卡切换-->
		<me-tabs class="fixtabs" v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="100" :tabWidth="180"></me-tabs>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" top="120" :down="downOption" :up="upOption" @up="upCallback"
		 @emptyclick="emptyClick">
			<view v-for="(item,index) in listdata" :key="index" class="ordercontainer">
				<view class="order-head">
					<view class="ordernum">
						<view class="order-text">
							<view class="order-n">
								订单编号：<view class="eli">{{item.id}}</view>
							</view>
							<text class="copy" @click="onekeycopy(item.id)">一键复制</text>
						</view>
						<text class="order-status" style="color: #808080;" v-if="item.status==5">订单取消</text>
						<text v-else :class="['order-status',item.status<2?'payagain':'']" @click="payagain(index)">{{tabs[item.status]}}</text>
					</view>
					<text class="order-timer">{{item.add_time}}</text>
				</view>

				<view class="shop-info">
					<image class="shopo-img" :src="item.thumb" mode="aspectFill"></image>
					<view class="shop-text">
						<view class="shop-title">
							<text class="font-size-normal">{{item.title}}</text>
						</view>
						<view class="shop-title">
							<view class="title-item">
								<text class="font-size-samll">数量：</text>
								<text class="font-size-samll samll-color">{{item.count}}</text>
							</view>
							<view class="title-item">
								<text class="font-size-samll samll-color">支付金额：</text>
								<text class="prizes">￥{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
				<!--快递单号-->
				<view v-if="item.logistics_id">
					<view class="logistics">
						<text class="tickets">快递单号：{{item.logistics_id}}（{{item.logistics}}）</text>
						<view class="express-status"><text>物流状态：</text><text class="ztinfo">{{express_status[item.status-30]}}</text></view>
					</view>
					<view class="danhao">
						<view class="copy-ordernum" @click="onekeycopy(item.logistics_id)">复制快递单号</view>
					</view>
				</view>

			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				lock: false,
				listdata: [],
				tabs: ['全部', '待付款', '待收货', '已完成'],
				tabIndex: 0,
				express_status: ['在途', '揽收', '疑难', '退签', '派件', '退回', '转投'], //物流状态 
				downOption: {
					use: false,
				},
				upOption: {
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 未找到订单信息 ~', // 提示
						btnText: ''
					},
					textLoading: "玩命加载中...",
					textNoMore: "-- 人家是有底线的 --",
				},
			}
		},
		//监听右上角事件
		onNavigationBarButtonTap() {
			uni.switchTab({
				url: '/pages/index/index'
			})
		},
		methods: {
			//再次支付
			payagain(index) {
				let data = this.listdata[index];
				if (data.status >= 2) {
					return
				}
				console.log(data);
				let _that = this;
				if (this.lock) {
					return
				}
				this.lock = true
				_that.$HttRequest({
					url: '/product/repay',
					param: {
						id: data.id
					}
				}, 'POST', true).then(res => {
					console.log(res);
					if (res.status === 10000) {
						if (res.data) {
							uni.requestPayment({
								provider: "wxpay",
								orderInfo: res.data,
								success() {
									//兑换后的积分存入内存中
									_that.$ShowMsg('商品支付成功！')
									_that.tabChange(2);
									_that.lock = false;
								},
								fail(error) {
									_that.$ShowMsg('订单已取消！')
									_that.lock = false;
								}
							})
						} else {
							this.$ShowMsg('订单已失效！')
						}

					} else {
						_that.$ShowMsg(res.message);
						_that.lock = false;
					}
				}).catch(error => {
					//异常错误
					_that.$ShowMsg('statusCode：' + error.errMsg);
				})
			},

			//复制订单号
			onekeycopy(id) {
				uni.setClipboardData({
					data: id,
					success: function() {
						//console.log('success');
					}
				})
			},
			mescrollInit(mescroll) {
				//console.log(mescroll);
			},
			emptyClick(e) {
				console.log(e);
			},
			upCallback(page) {
				let status = this.tabIndex;
				this.getinitdata(page.num, status).then(res => {
					this.mescroll.endSuccess(res.length);
					//设置列表数据
					if (page.num == 1) this.listdata = []; //如果是第一页需手动制空列表
					//处理状态
					res.map((item, index) => {
						if (item.status == 2 || item.status == 3) {
							res[index].status = 2
						}
					})
					console.log(res)
					this.listdata = this.listdata.concat(res); //追加新数据
				}).catch(error => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.$ShowMsg(error);
				})
			},

			//切换菜单
			tabChange(index) {
				this.tabIndex = index;
				this.listdata = [];
				this.mescroll.resetUpScroll();
			},
			//获取列表数据
			getinitdata(pages, status) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: '/product/orderList',
						param: {
							page: pages,
							status: status,
						}
					}).then((res) => {
						if (res.status === 10000) {
							resolve(res.data.data);
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					});
				});

			}
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.ordercontainer {
		margin-bottom: 20rpx;
		background-color: #fff;
	}

	.eli {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 65%;

	}

	.fixtabs {
		width: 100%;
		position: fixed;
		z-index: 9990;
		top: --window-top;
		/* css变量 */
		left: 0;
		top: 0;
	}

	.order-head {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		border-bottom-color: #eaeaea;
		border-bottom-width: 1rpx;
		border-bottom-style: solid;
	}

	.danhao {
		padding: 20rpx;
		display: flex;
		justify-content: flex-end;
		border-top-color: #eaeaea;
		border-top-width: 1rpx;
		border-top-style: solid;
	}

	.order-timer {
		font-size: 24rpx;
		color: #ababab;
	}

	.font-size-samll {
		color: #808080;
		font-size: 22rpx;
	}

	.samll-color {
		color: #000;
	}

	.font-size-normal {
		font-size: 28rpx;
		font-weight: bold;
	}

	.prizes {
		font-size: 35rpx;
		color: $uni-botton-primary;
		font-weight: bold;
	}

	.logistics {
		display: flex;

		align-items: flex-start;
		padding: 20rpx;
		justify-content: space-between;
		font-size: 25rpx;
		color: #808080;
		.express-status {
		
			display: flex;
			justify-content: center;
			align-items: center;
			.ztinfo{
				color: $uni-color-primary;
				font-weight: bold;
				}
		}
		.tickets {}
	}


	.copy-ordernum {
		width: 180rpx;
		height: 50rpx;
		border-color: $uni-botton-primary;
		border-width: 2rpx;
		border-style: solid;
		color: $uni-botton-primary;
		font-size: 25rpx;
		border-radius: 15rpx;
		text-align: center;
		line-height: 50rpx;

	}

	.shop-info {
		display: flex;
		padding: 20rpx;
		border-bottom-color: #eaeaea;
		border-bottom-width: 1rpx;
		border-bottom-style: solid;
		justify-content: center;
		align-items: center;
	}

	.shopo-img {
		width: 180rpx;
		height: 180rpx;
	}

	.shop-text {

		padding: 20rpx;

		justify-content: center;
		align-items: flex-start;
		flex: 1;

	}

	.shop-title {
		width: 490rpx;
		flex-direction: row;
		margin: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title-item {
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.content {
		background-color: #fff;
		border-bottom-color: #f0f0f0;
		border-bottom-width: 20rpx;
		border-bottom-style: solid;
		border-top-color: #f0f0f0;
		border-top-width: 20rpx;
		border-top-style: solid;
	}

	.ordernum {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}


	.order-status {
		font-size: 28rpx;
		color: #ef3854;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.payagain {
		background-color: #FF0000;
		border-radius: 20rpx;
		color: #fff;
		padding: 15rpx;
	}

	.order-text {
		font-size: 28rpx;
		display: flex;
	}

	.order-n {
		width: 420rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
	}

	.copy {
		color: #808080;
		border-radius: 15rpx;
		width: 120rpx;
		height: 40rpx;
		font-size: 22rpx;
		border-color: #7f7f7f;
		border-width: 3rpx;
		border-style: solid;
		line-height: 38rpx;
		text-align: center;
		margin-left: 10rpx;
	}



	.tabbar {
		flex: 1;
		background-color: #1769dd;
		flex-direction: row;
		justify-content: space-around;
		height: 90rpx;
	}

	.hover {
		font-weight: bold;
		transform: scale(1.2);
	}

	.hover-out {
		font-weight: normal;
		transform: scale(1);
	}

	.baritem {
		justify-content: center;
		align-items: center;
	}

	.bar-title {
		color: #fff;
		line-height: 95rpx;
		height: 80rpx;
		font-size: 30rpx;
		width: 110rpx;
		// border-color: #000 ;
		// border-width:1rpx ;
		// border-style: solid;
		text-align: center;
		transition-property: transform, opacity;
		transition-duration: 0.3s;
		transition-timing-function: cubic-bezier(.5, .49, .57, 1.41);

	}

	.bar-line {
		width: 80rpx;
		height: 6rpx;
		background-color: #fff;
	}
</style>
